<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<c:set value="${pageContext.request.contextPath}" var="path" scope="page" />
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>table综合案例</title>
    <link rel="stylesheet" href="${path}/static/layui/css/layui.css" media="all">
</head>
<body>

<!-- 数据表格开始 -->
<div class="layui-btn-container" style="display: none;"
     id="userToolBar">
    <button class="layui-btn layui-btn-sm" lay-event="add">添加管理员</button>
    <button class="layui-btn layui-btn-sm" lay-event="delete">批量删除</button>
</div>
<div id="userBar" style="display: none;">
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-xs " lay-event="update">修改</a>
</div>
<table class="layui-hide" id="userTable" lay-filter="userTable"></table>
<!-- 数据表格结束 -->

<!-- 添加和修改的弹出层代码-->
<div style="display: none; padding: 20px;" id="save">
    <form action="" class="layui-form" lay-filter="dateFrm" id="dateFrm">
        <div class="layui-form-item">
            <div class="layui-line">
                <label class="layui-form-label">图书名</label>
                <div class="layui-input-inline">
                    <input type="text" name="bookName" lay-verify="required"
                           placeholder="请输入标题" autocomplete="off" class="layui-input">
                    <!-- required lay-verify="required"验证 -->
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-line">
                <label class="layui-form-label">图书数量</label>
                <div class="layui-input-inline">
                    <input type="text" name="bookCounts" lay-verify="required"
                           placeholder="请输入图书数量" autocomplete="off" class="layui-input">
                    <!-- required lay-verify="required"验证 -->
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-line">
                <label class="layui-form-label">图书价格</label>
                <div class="layui-input-inline">
                    <input type="text" name="price" lay-verify="required"
                           placeholder="请输入图书价格" autocomplete="off" class="layui-input">
                    <!-- required lay-verify="required"验证 -->
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-line">
                <label class="layui-form-label">图书出版社</label>
                <div class="layui-input-inline">
                    <input type="text" name="bookPublic" lay-verify="required"
                           placeholder="请输入图书出版社" autocomplete="off" class="layui-input">
                    <!-- required lay-verify="required"验证 -->
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-line">
                <label class="layui-form-label">图书详情</label>
                <div class="layui-input-inline">
                    <input type="" name="detail" lay-verify="required"
                           placeholder="请输入图书详情" autocomplete="off" class="layui-input">
                    <!-- required lay-verify="required"验证 -->
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="margin-left: auto">
            <div class="layui-input-block">
                <button
                        class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release" lay-submit=''
                        lay-filter="doSubmit">提交</button>
                <!-- lay-submit=''判断提交的form表单是否为空 -->
                <button type="reset"
                        class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh "
                        lay-filter="submit">重置</button>
            </div>
        </div>
    </form>
</div>
<%--更新--%>
<div style="display: none; padding: 20px;" id="update">
    <form action="" class="layui-form" lay-filter="dateFrm1" id="dateFrm1">
        <div class="layui-form-item" style="display: none">
            <div class="layui-line">
                <label class="layui-form-label">图书编号</label>
                <div class="layui-input-inline">
                    <input type="text" name="bookID" autocomplete="off" class="layui-input">
                    <!-- required lay-verify="required"验证 -->
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-line">
                <label class="layui-form-label">图书名</label>
                <div class="layui-input-inline">
                    <input type="text" name="bookName" lay-verify="required"
                           placeholder="请输入标题" autocomplete="off" class="layui-input">
                    <!-- required lay-verify="required"验证 -->
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-line">
                <label class="layui-form-label">图书数量</label>
                <div class="layui-input-inline">
                    <input type="text" name="bookCounts" lay-verify="required"
                           placeholder="请输入图书数量" autocomplete="off" class="layui-input">
                    <!-- required lay-verify="required"验证 -->
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-line">
                <label class="layui-form-label">图书价格</label>
                <div class="layui-input-inline">
                    <input type="text" name="price" lay-verify="required"
                           placeholder="请输入图书价格" autocomplete="off" class="layui-input">
                    <!-- required lay-verify="required"验证 -->
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-line">
                <label class="layui-form-label">图书出版社</label>
                <div class="layui-input-inline">
                    <input type="text" name="bookPublic" lay-verify="required"
                           placeholder="请输入图书出版社" autocomplete="off" class="layui-input">
                    <!-- required lay-verify="required"验证 -->
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-line">
                <label class="layui-form-label">图书详情</label>
                <div class="layui-input-inline">
                    <input type="" name="detail" lay-verify="required"
                           placeholder="请输入图书详情" autocomplete="off" class="layui-input">
                    <!-- required lay-verify="required"验证 -->
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="margin-left: auto">
            <div class="layui-input-block">
                <button
                        class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release" lay-submit=''
                        lay-filter="doSubmit1">提交</button>
                <!-- lay-submit=''判断提交的form表单是否为空 -->
                <button type="reset"
                        class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh "
                        lay-filter="submit">重置</button>
            </div>
        </div>
    </form>
</div>
<!-- 添加和修改的弹出层代码-->
<script src="${path}/static/layui/layui.js"></script>
<script>
    layui.use([ 'table', 'laydate','jquery','layer','form' ], function() {
        var $=layui.jquery;
        var table = layui.table;
        var form=layui.form;
        var layer=layui.layer;
        var laydate = layui.laydate;

        //绑定时间选择器
        laydate.render({
            elem : '#startTime'
        })
        laydate.render({
            elem : '#endTime'
        })

        //数据表格
        var tableID=table.render({
            elem : '#userTable' //渲染的目标对象
            ,
            url :'http://localhost:8080/user/allUser' //数据接口
            ,
            response: {
                statusName: 'code',
                statusCode: 200,
                msgName: 'message',
                countName: 'count',
                dataName: 'data'
            },
            title : '数据表格' //数据表格的标题
            ,
            page : true //开启分页
            ,
            toolbar : '#userToolBar'//表格的工具条
            ,
            defaultToolbar : [ 'filter', 'print', 'exports' ],
            cols : [ [ //表头
                {
                    type : 'checkbox',
                    fixed : 'left'
                } //表格的复选框 LAY_CHECKED 表示是否选中了复选框
                , {
                    field : 'id',
                    title : 'ID',
                    sort : true,
                    align: 'center'

                } //sort 是否排序布尔值
                , {
                    field : 'username',
                    title : '用户名',
                    align: 'center'
                }, {
                    field : 'password',
                    title : '用户密码',
                    sort : true,
                    align: 'center'
                },
                {
                    field : 'sex',
                    title : '性别',
                    align: 'center'
                },
                {
                    field : 'email',
                    title : '邮箱',
                    align: 'center'
                },
                {
                    field : 'phone',
                    title : '电话',
                    align: 'center'
                },
                {
                    field : 'stat',
                    title : '类别',
                    align: 'center'
                },
                {
                    fixed : 'right',
                    title : '操作',
                    toolbar : '#userBar',
                    width : 200,
                    align : 'center'
                } ] ]
        });
        //监听头部事件
        var tableTns = table.on("toolbar(userTable)", function(obj) {
            switch (obj.event) {
                case 'add':
                    openAddUser();
                    break;
                case 'delete':
                    layer.msg('删除');
                    break;
            };
        });
        //工具条事件
        table.on('tool(userTable)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            if (layEvent === 'del') { //删除
                layer.confirm('真的删除行么', function(index) {
                    form.val('dateFrm',data);
                    console.log("删除"+data.id);
                    $.ajax({
                        type: 'post',
                        url: '${pageContext.request.contextPath}/user/deleteUser',//调用删除接口，将选中行的id传给后端
                        dataType:'text',
                        data:{"id":data.id},
                        success: function (data) {
                            if (data==1){
                                layer.msg("删除成功", {icon: 6});
                                table.reload('userTable');
                            }
                        }
                    });
                    layer.close(index);
                });
            } else if (layEvent === 'update') { //编辑
                openUpdateUser(data);
                console.log(data);
            }
        });

        var url;
        var mainIndex;
        //弹出层方法 添加页面
        function openAddUser() {
            mainIndex=layer.open({
                type:1,
                title:'添加图书',
                content:$("#save"),
                area:['400px','400px'],
                success:function(index){
                    //清空数据表格
                    $('#dateFrm')[0].reset();
                    url='${pageContext.request.contextPath}/book/addBook';

                }
            })
        }
        //新增
        form.on("submit(doSubmit)",function(obj){
            //序列化表单数据
            var param=$('#dateFrm').serialize();
            $.post(url,param,function(obj){
                layer.msg("添加成功", {icon: 6});
                //关闭弹出层
                layer.close(mainIndex);
            })
        })
        //更新
        form.on("submit(doSubmit1)",function(obj){
            //序列化表单数据
            var param=$('#dateFrm1').serialize();
            $.post(url,param,function(obj){
                //关闭弹出层
                layer.close(mainIndex);

            })
            layer.msg("修改成功", {icon: 6});
        })
        //弹出层方法 修改页面
        function openUpdateUser(data) {
            mainIndex=layer.open({
                type:1,
                title:'修改图书',
                content:$("#update"),
                area:['400px','450px'],
                success:function(index){
                    form.val('dateFrm1',data);
                    url='${pageContext.request.contextPath}/book/updateBook';
                }
            })
        }
    });
</script>
</body>
</html>
